<template>
  <el-row>
    <el-col :span="24">
      <el-select v-model="selectVal"
                 :clearable="clearable"
                 filterable
                 remote
                 :placeholder="placeholder"
                 :remote-method="remoteMethod"
                 @change="changeValue"
                 @clear="clearValue"
                 :loading="loading"
                 :style="'width:100%'">
        <el-option
            v-for="item in dataList"
            :key="item[selectValue]"
            :label="item[selectLabel]"
            :value="item[selectValue]"
        >
          <span style="float: left">{{ item[selectLabel] }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px"
           v-if="selectLabelTwo">{{ item[selectLabelTwo] }}</span>
        </el-option>
        <el-col :span="24">
          <div class="bottomPage">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page="this.entityPageInfo.page"
            :page-size="this.entityPageInfo.limit"
            layout="total, prev, pager, next"
            :total="this.entityPageInfo.total">
            </el-pagination>
          </div>
        </el-col>
      </el-select>
    </el-col>
  </el-row>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "ComSelectPage",
  //接收参数
  props:{
    clearable: {
      type: Boolean,
      default: false
    },
    //请求地址
    getUrl:{
      type:Object,
      require:true
    },
    //el-option label展示字段名
    selectLabel: {
      type: String,
      default: 'serialNumber'
    },
    //el-option label后缀展示字段名
    selectLabelTwo: {
      type: String,
      default: ''
    },
    //el-option Value展示字段名
    selectValue: {
      type: String,
      default: 'id'
    },
    //el-option Value展示字段名
    defaultValue: {
      type: String,
      default: ''
    },
    //自定义搜索关键字
    searchLabel: {
      type: String,
      default: ''
    },
    //el-option Value展示字段名
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  watch: {
    defaultValue (val) {
      this.selectVal = val
    },
    selectVal (val) {
      this.remoteMethod('')
    },
  },
  data() {
    return {
      selectVal:this.defaultValue,
      dataList:[],
      entityPageInfo:this.getUrl.params,
      list: [],
      loading: false,
    };
  },
  mounted(){
    this.getList()
  },
  methods:{
    // 列表
    getList(){
      //this.getUrl 父组件接收的接口地址 这样设计利于不同页面使用 更灵活
      let item = {...this.getUrl}
      item.params = this.entityPageInfo
      return request(item).then(({data}) => {
        this.dataList = data.data.list
        this.entityPageInfo.total=parseInt(data.data.total);
      })
    },
    //翻页
    handleCurrentChange(val) {
      //val获取点击页数，赋值刷新接口数据
      this.entityPageInfo.page = val
      this.getList()
    },
    changeValue(e){
      this.selectVal = e
      //e获取选择code 给父页面
      this.$emit('selectPageChange',e);
    },
    clearValue(){
      //e获取选择code 给父页面
      this.$emit('clearValue');
    },
    //远程搜索
    remoteMethod(query) {
      let item = {...this.getUrl}
      item.params = this.entityPageInfo
      item.params[this.searchLabel?this.searchLabel: this.selectLabel] =  query
      this.loading = true;
      this.dataList = []
      return request(item).then(({data}) => {
        this.dataList = data.data.list
        this.entityPageInfo.total=parseInt(data.data.total);
        this.loading = false;
      })
      this.loading = false;
    }
  }
};
</script>
<style scoped>
.bottomPage{display: flex;margin-bottom: 10px}
</style>
